<template>
    <div class="shop-view">
        <div class="head">
            <div class="search">
                <City></City>
                <div class="content">
                    <img src="@/assets/images/search-white.png">
                    <input class="f14" type="text" v-model="searchContent" placeholder="发现店铺更多商品，搜一搜~">
                    <div class="clean" @click="cleanValue" v-show="isActive">
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
            <img class="banner" src="@/assets/images/shop.jpg">
        </div>
        <div class="select f14">
            <div class="item sort" :class="getFlag(1)" @click="changeSortData(1)">
                综合排序
            </div>
            <div class="item price">
                <span class="title" @click="priceHandle">价格</span>
                <div class="icon">
                    <span :class="getFlag(2)"></span>
                    <span :class="getFlag(3)"></span>
                </div>
            </div>
            <div class="item new" :class="getFlag(4)" @click="changeSortData(4)">新品</div>
            <div class="item right-img" @click="getShopCategory">
                <img src="@/assets/images/sort2.png">
                <div class="line"></div>
            </div>
        </div>
        <van-list class="data-list bg" v-model="loading" :finished="finished" @load="onLoad">
            <div class="item" v-for="item in dataList" :key="item.id" @click="goGoods(item.id)">
                <img class="imgurl" v-lazy="getOtherImageUrl(item.imgurl)">
                <div class="detail f14">
                    <span class="title">{{ item.title }}</span>
                    <p class="price">
                        ￥{{ item.min_price }}
                        <span>/天</span>
                    </p>
                </div>
            </div>
        </van-list>
        <loading v-show="loading"></loading>
        <nav-bar :close-help="closeService"></nav-bar>
        <contact-service v-show="showService" :close-help="closeService"></contact-service>
    </div>
</template>
<script>
import { List } from 'vant';
import eventBus from '@/common/event-bus';
import NavBar from "@/components/Shop/NavBar.vue";
import City from "@/components/GoodsList/City.vue";
import SearchHead from "@/components/GoodsList/SearchHead.vue";
import ContactService from "@/components/Goods/ContactService.vue";
export default {
    name: "ShopView",
    components: {
        [List.name]: List,
        SearchHead,
        City,
        NavBar,
        ContactService,
    },
    data() {
        return {
            searchContent: "",
            isActive: false,
            loading: false,
            finished: false,
            priceFlag: false,
            showService: false,
            dataList: [],
            requestData: {
                city_name: "",
                goods_name: "",
                member_id: "",
                page: 1,
                pageSize: 10,
                sort_data: 1,
            },
        }
    },
    watch: {
        searchContent(value) {
            if (value.length != 0)
                this.isActive = true
            else
                this.isActive = false
        }
    },
    created() {
        this.requestData.member_id = this.$route.query.member_id || localStorage.getItem("member_id");
        localStorage.setItem("member_id", this.requestData.member_id);
        eventBus.$on("service", () => this.showService = true)
    },
    methods: {
        goGoods(goods_id) {
            this.$router.push({ name: "goods", query: { goods_id } })
        },
        getFlag(index) {
            const flag = this.requestData.sort_data == index;
            return flag ? "active" : "";
        },
        getShopCategory() {
            this.$sendGet("Shop/getShopCategory", { member_id: this.requestData.member_id })
                .then(res => {
                    if (res.data.status === 200) {
                        const { data } = res.data;
                        console.log(data, '获取数据成功');
                    }
                })
        },
        changeSortData(index) {
            this.requestData.sort_data = index;
            this.cleanAndSend();
        },
        cleanAndSend() {
            this.requestData.page = 1;
            this.finished = false;
            this.dataList.splice(0);
            this.onLoad();
        },
        priceHandle() {
            this.priceFlag = !this.priceFlag;
            this.requestData.sort_data = this.priceFlag ? 2 : 3;
            this.cleanAndSend();
        },
        closeService() {
            this.showService = false;
        },
        async onLoad() {
            this.loading = true;
            try {
                const response = await this.$sendPost("Shop/getShopIndex", this.requestData);
                const { status } = response.data;
                if (status === 200) {
                    this.requestData.page++;
                    const { data } = response.data.data;
                    this.dataList.push(...data);
                    if (data.length < this.requestData.pageSize) this.finished = true;
                } else if (status === 100) {
                    this.$toast(response.data.msg)
                    this.finished = true;
                }
                this.loading = false;
            } catch (err) {
                this.finished = true;
            }
        },
        cleanValue() {
            this.searchContent = "";
        },
    },
}
</script>
<style lang="scss" scoped>
::v-deep .van-list__loading {
    display: none;
}

.shop-view {
    .head {
        padding: 15px;
        padding-top: 20px;
        background-color: #f6f7f6;

        .search {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            width: 345px;

            .content {
                width: 280px;
                display: flex;
                position: relative;

                img {
                    position: absolute;
                    width: 25px;
                    left: 5px;
                    top: 2px;
                    height: 25px;
                }

                input {
                    width: 100%;
                    border-radius: 15px;
                    padding: 8.5px 0;
                    padding-left: 30px;
                    background-color: #adadad;
                    outline: 0;
                    border: 0;
                    color: white;

                    &::placeholder {
                        color: white;
                        font-size: 14px;
                    }
                }

                .clean {
                    width: 15px;
                    height: 15px;
                    // background-color: #333333;
                    background-color: #979797;
                    position: absolute;
                    right: 10px;
                    top: 50%;
                    transform: translateY(-50%) rotateZ(45deg);
                    border-radius: 50%;

                    span {
                        position: absolute;
                        display: inline-block;
                        width: 1.5px;
                        height: 8px;
                        border-radius: 2px;
                        background-color: rgb(255, 255, 255);
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);

                        &:nth-of-type(1) {
                            transform: translate(-50%, -50%) rotateZ(88deg);
                        }
                    }
                }
            }
        }

        .banner {
            height: 125px;
            width: 100%;
            border-radius: 10px;
            object-fit: cover;
        }
    }

    .select {
        background-color: white;
        display: flex;
        padding: 0 10px;

        .item {
            padding: 10px;
            display: flex;
            align-items: center;
            flex-basis: 25%;

            &.sort.active {
                color: #ce3b39;
            }
        }

        .new {
            &.active {
                color: #ce3b39;
            }
        }

        .new,
        .price {
            justify-content: center;
        }

        .price {
            .icon {
                margin-left: 5px;
                position: relative;
                display: flex;
                flex-direction: column;

                span {
                    display: inline-block;
                    border: 5px solid transparent;

                    &:nth-of-type(1) {
                        margin-bottom: 2px;
                        border-bottom-color: #c9c9c9;

                        &.active {
                            border-bottom-color: #ce3b39;
                        }
                    }

                    &:nth-of-type(2) {
                        border-top-color: #c9c9c9;

                        &.active {
                            border-top-color: #ce3b39;
                        }
                    }
                }
            }
        }

        .right-img {
            flex-direction: row-reverse;

            .line {
                height: 20px;
                width: 1px;
                background-color: #cccccc;
                margin-right: 25px;
            }

            img {
                width: 20px;
            }
        }
    }

    .data-list {
        background-color: #f7f7f7;
        padding: 15px;
        padding-bottom: 0;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;

        .item {
            width: 165px;
            background-color: white;
            margin-bottom: 15px;
            border-radius: 10px;
            padding: 10px;

            &:nth-of-type(odd) {
                margin-right: 15px;
            }

            .imgurl {
                width: 100%;
            }

            .detail {
                .price {
                    margin-top: 10px;
                    color: #ce3b39;

                    span {
                        display: inline-block;
                        transform: scale(.7);
                        margin-left: -5px;
                    }
                }
            }
        }
    }
}
</style>